Day23 家要先蓋好 ─ 用 S3 建立前端雛形

2025 iThome 鐵人賽

DAY 23

Build on AWS

從零到雲端：AWS 開發之路系列第 23 篇

17th鐵人賽

yangg_yun

2025-10-07 10:11:42

33 瀏覽

分享至

昨天我們完成了「照片日記網站」的專案規劃，畫好了整體的架構，也想清楚了功能和資料流程。但有了藍圖之後，接下來要做的第一件事情，就是「蓋房子」──也就是準備一個可以放網站的地方。

在 AWS 上，最適合拿來放網站的地方就是 S3 (Simple Storage Service)。S3 本來是設計來存檔案的雲端硬碟，但它也有一個很方便的功能，就是可以直接把它當成靜態網站伺服器來用。

用 S3 部署前端雛形

在 AWS 建立 S3 Bucket，點選 Create bucket
填寫以下資訊：

Bucket name：這邊以photo-diary-frontend為名
Region：ap-east-2（我習慣用台北）
Block Public Access：要取消勾選「Block all public access」，因為我們要讓別人能看到網站
其他選項先用預設 → Create bucket

啟用靜態網站託管

進入剛建立的 Bucket ，點選「屬性」，滾到最下面，找到「靜態網站託管」選擇編輯

靜態網站託管選擇「啟用」
Hosting type: Host a static website
Index document: index.html
Error document: error.html（可以先沒有）
儲存後，AWS 會給一個網址

撰寫前端雛形並上傳

接下來我先準備一個簡單的 index.html，作為我們的網站首頁
(這個頁面目前還沒有任何真正的功能)

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>我的照片日記</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background: #f9f9f9;
    }
    header {
      background: #4CAF50;
      color: white;
      padding: 15px;
      text-align: center;
    }
    main {
      padding: 20px;
      text-align: center;
    }
    .btn {
      background: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
      border-radius: 5px;
    }
    .btn:hover {
      background: #45a049;
    }
  </style>
</head>
<body>
  <header>
    <h1>📸 我的照片日記</h1>
  </header>
  <main>
    <p>歡迎來到我的日記網站！</p>
    <button class="btn" onclick="alert('功能開發中...')">新增日記</button>
  </main>
</body>
</html>

設定 Bucket Policy 讓檔案能公開讀取

因為 S3 預設是私有的，所以有時候會遇到「Access Denied」錯誤，這時候需要加一段 Bucket Policy，所以我們在「儲存貯體政策」中加入Bucket Policy，完成後我們點入「儲存貯體網站端點」就可以看到我們剛撰寫的index.html
（這邊目前為止的步驟都有在前面介紹過！）

點擊新增日記